<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import Request from '@/api/axios'
import { useUserStore } from '@/stores/user'
import { message } from 'ant-design-vue'
import { useLocalStorage } from '@vueuse/core'
import { HttpStatusCode } from 'axios'
const router = useRouter()
const route = useRoute()
const regex = /redirect=([^&]+)/
const redirectPath = route.fullPath.match(regex)?.slice(1)[0] ?? '/'
const user = useUserStore()
const { initStore } = user
import { reactive } from 'vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
interface FormState {
    username: string
    password: string
    remember: boolean
}
const formState = reactive<FormState>({
    username: '',
    password: '',
    remember: true
})

const AccessToken = useLocalStorage('access_token', null)
const RefreshToken = useLocalStorage('refresh_token', null)
const userName = useLocalStorage('userName', '')
const password = useLocalStorage('password', '')
const submitForm = async () => {
    await Request.post({
        url: `/user/login`,
        data: {
            username: formState.username,
            password: formState.password
        }
    })
        .then((response: any) => {
            if (response.code == HttpStatusCode.Ok) {
                message.success('登录成功', 1)
                AccessToken.value = response.msg[0]
                RefreshToken.value = response.msg[1]
                userName.value = formState.username
                password.value = formState.password
                initStore({
                    Id: response.info.id,
                    Username: formState.username,
                    Nickname: response.info.nickname,
                    Gender: response.info.gender,
                    Avatar: response.info.avatar,
                    Rating: response.info.rating,
                })
                router.push({ path: redirectPath, replace: true })
            } else {
                message.error('登录失败', 2)
                console.log(response.msg)
            }
        })
        .catch((err: any) => {
            message.error('登录失败')
            console.log(err)
        })
}
import { particlesOptions } from '@/assets/particles';

const particlesLoaded = async container => {
    console.log("Particles container loaded", container);
};

</script>
<template>
    <vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" :options="particlesOptions" />
    <div class="login-container">
        <div class="dynamic-bg"></div>
        <div class="card" ref="card">
            <div class="card__shine"></div>
            <div class="card__glass"></div>
            <a-form :model="formState" class="login-form" :label-col="{ span: 5 }">
                <a-form-item label="用户名" name="username" :rules="[
                    { required: true, message: '请输入用户名' },
                    { min: 3, max: 10, message: '长度应该在 3 到 10', trigger: 'blur' }
                ]">
                    <a-input class="w-[20rem] h-[2rem]" v-model:value="formState.username">
                        <template #prefix>
                            <UserOutlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item label="密码" name="password"
                    :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
                    <a-input-password class="w-[20rem] h-[2rem]" v-model:value="formState.password">
                        <template #prefix>
                            <LockOutlined class="site-form-item-icon" />
                        </template>
                    </a-input-password>
                </a-form-item>

                <a-form-item :wrapper-col="{ span: 10, offset: 5 }">
                    <a-form-item name="remember" no-style>
                        <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
                        <a class="login-form-forgot" href="">忘记密码</a>
                    </a-form-item>

                </a-form-item>

                <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
                    <a-button :disabled="formState.username == '' || formState.password == ''" type="primary"
                        html-type="submit" class="w-[5rem] h-[2rem] login-form-button" @click="submitForm">
                        登录
                    </a-button>
                    <a-button type="dashboard" class="w-[5rem] h-[2rem] " @click="() => {
                        formState.username = 'guest'
                        formState.password = 'guest'
                        submitForm()
                    }">
                        游客访问
                    </a-button>
                    <a-button type="link" @click="$router.push({ name: 'register' })">去注册!</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<style scoped>
.login-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dynamic-bg {
    position: absolute;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            #ee7752,
            #e73c7e,
            #23a6d5,
            #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    filter: blur(60px);
    opacity: 0.7;
}

.card {
    position: relative;
    width: 600px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    transform-style: preserve-3d;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.5s;
    z-index: 999;
    margin: auto;
}

.card__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
            transparent 40%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 60%);
    animation: shine 3s infinite;
}

.neon-button {
    background: transparent;
    border: 2px solid #23d5ab;
    position: relative;
    transition: 0.5s;
    width: 100%;
}

.neon-button:hover {
    background: #23d5ab;
    box-shadow: 0 0 15px #23d5ab,
        0 0 30px #23d5ab,
        0 0 60px #23d5ab;
}

.glow-text {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes shine {
    0% {
        background-position: -100%
    }

    100% {
        background-position: 200%
    }
}

.a-input:hover,
.a-input-password:hover {
    transform: translateY(-2px);
}

.login-form-forgot:hover {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

#tsparticles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    /* 确保粒子背景在其他内容后面 */
}
</style>
